<template>
  <n-drawer class="retail-goods" v-model:show="active" width="96%">
    <n-drawer-content body-style="--n-body-padding:0">
      <div class="retail-goods-content">
        <div class="retail-goods-content_left">
          <div class="retail-goods-content_left-header">
            <p class="retail-goods-content_left-header--title">选择商品</p>
            <button class="retail-goods-content_left-header--button">清空列表</button>
          </div>
          <div class="retail-goods-content_left-body">
            <div v-if="true" class="retail-goods-content_left-body--goods">
              <div class="g-item">
                <div class="g-item-left">
                  <div class="g-item-left_name">
                    <p>B2-1016抹胸系列-蕾丝花</p>
                  </div>
                  <p class="g-item-left_alias">B1-1078樱花系列</p>
                  <div class="g-item-left_spec">
                    <span>粉色/70B</span>
                    <span>￥268</span>
                  </div>
                </div>
                <div class="g-item-right">
                  <p>剩余11</p>
                  <div class="g-item-right_counter">
                    <div class="iconfont icon-minus"></div>
                    <input type="number" value="1">
                    <div>+</div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="retail-goods-content_left-body--empty">
              <span>请点击右侧选择商品</span>
            </div>
          </div>
          <div class="retail-goods-content_left-footer">
            <button class="f_btn f_btn--cancel" @click="cancel">取消</button>
            <button class="f_btn f_btn--confirm" :class="{ 'f_btn--active' : true }">确认</button>
          </div>
        </div>
        <div class="retail-goods-content_right">
          <div class="retail-goods-content_right-header_list">
            <button class="retail-goods-content_right-header_list_btn retail-goods-content_right-header_list_btn--active">全部产品</button>
            <button class="retail-goods-content_right-header_list_btn">内衣产品</button>
            <button class="retail-goods-content_right-header_list_btn">内裤产品</button>
            <button class="retail-goods-content_right-header_list_btn">体雕衣</button>
            <button class="retail-goods-content_right-header_list_btn">内衣产品</button>
            <button class="retail-goods-content_right-header_list_btn">内衣产品</button>
            <button class="retail-goods-content_right-header_list_btn">内衣产品</button>
          </div>
          <div class="retail-goods-content_right-header_btn">
            <button @click="isPopSelectShow = !isPopSelectShow">
              傲雪棋商品
              <p class="iconfont icon-shanglajiantou" :class="{ 'icon--active' : isPopSelectShow }"></p>
            </button>
            <div v-show="isPopSelectShow" class="b-popselect">
              <div class="b-popselect_option" :class="{ 'b-popselect_option--active' : true }">傲雪棋商品</div>
              <div class="b-popselect_option">店铺商品</div>
            </div>
          </div>
          <div class="retail-goods-content_right-body">
            <div class="b-header">
              <div class="b-header_input">
                <span>搜索商品</span>
                <input type="text" placeholder="输入名称/款号或扫描条形码">
              </div>
              <div class="b-header_radio">
                <label>
                  <input type="radio" name="btn" checked>
                  <div>默认显示</div>
                </label>
                <label>
                  <input type="radio" name="btn">
                  <div>显示库存</div>
                </label>
              </div>
            </div>
            <div class="b-goods-list">
              <div class="b-goods-list-item">
                <div class="b-goods-list-item_left">
                  <img :src="prefixOssUrl('picture.png')" alt="">
                </div>
                <div class="b-goods-list-item_right">
                  <div class="r-header">
                    <p>B1-1071豹纹系樱花sdasd</p>
                    <p>B1-1071豹纹系樱花dasda</p>
                  </div>
                  <div class="r-footer">
                    <span class="r-footer_amount">
                      ￥<span class="r-footer_amount--bold">248</span>起
                    </span>
                    <span class="r-footer_stock">剩300件</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="b-footer">
              <span class="iconfont icon-sanjiaoleft"></span>
              <div class="b-footer-num">299/300页</div>
              <span class="iconfont icon-sanjiaoright"></span>
            </div>
          </div>
          <div class="retail-goods-content_right-footer">
            <div class="retail-goods-content_right-footer_left">
              <p>颜色</p>
              <p>尺码</p>
            </div>
            <div class="retail-goods-content_right-footer_right">
              <template v-if="true">
                <div class="r-list">
                  <div class="r-list-item">粉色</div>
                  <div class="r-list-item">肤色</div>
                </div>
                <div class="r-list">
                  <div class="r-list-item">70A</div>
                  <div class="r-list-item" :class="{ 'r-list-item--unactive' : true }">70D</div>
                </div>
              </template>
              <div class="r-list--empty" v-else>
                <img :src="prefixOssUrl('empty.png')" alt="">
                <p>暂无信息</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </n-drawer-content>
  </n-drawer>
</template>

<script setup>
import {
  ref,
  inject
} from 'vue';
let active = inject('goodsDrawerActive');
const { prefixOssUrl } = inject('globalMethods');

const cancel = () => {
  active.value = false;
}

let isPopSelectShow = ref(false);
</script>

<style lang="less" scoped>
.retail-goods {
  &-content {
    display: flex;

    &_left {
      display: flex;
      flex-direction: column;
      width: 635px;
      height: 100vh;
      background: #f8f8f8;
      border-right: 1px solid #e5e5e5;

      &-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 98px;
        padding-left: 30px;
        background: #fff;
        box-shadow: 0px 5px 18px 0px rgba(0, 0, 0, 0.04);

        &--title {
          position: relative;
          font-size: 28px;
          font-weight: bold;
          color: #4a5060;

          &::before {
            position: absolute;
            top: 11px;
            left: -15px;
            content: "";
            width: 6px;
            height: 24px;
            background: #373b4f;
          }
        }

        &--button {
          height: 98px;
          width: 150px;
          font-size: 24px;
          font-weight: 500;
          color: #ec3f14;
          text-align: center;
          line-height: 98px;
          background: #fff;
        }
      }

      &-body {
        flex: 1;
        height: 100% - 226px;
        overflow-y: auto;

        &--goods {
          height: 150px;
          .g-item {
            display: flex;
            justify-content: space-between;
            margin: 0 30px;
            padding: 30px 0;
            border-bottom: 1px solid #e5e5e5;
            &-left {
              width: 400px;
              &_name {
                display: flex;
                align-items: center;

                > p {
                  font-size: 24px;
                  font-weight: bold;
                  color: #2e323d;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }
              &_alias {
                width: 100%;
                margin-top: 20px;
                font-size: 22px;
                font-weight: 500;
                color: #4a5060;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              &_spec {
                display: flex;
                justify-content: space-between;
                align-items: center;
                > span {
                  &:nth-child(1) {
                    font-size: 20px;
                    font-weight: 500;
                    color: #2e323d;
                  }
                  &:nth-child(2) {
                    font-size: 24px;
                    font-weight: 500;
                    color: #2e323d;
                  }
                }
              }
            }
            &-right {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: center;
              > p {
                font-size: 20px;
                font-weight: 500;
                color: #4a5060;
              }
              &_counter {
                display: flex;
                justify-content: center;
                align-items: center;
                > input {
                  width: 48px;
                  height: 48px;
                  font-size: 26px;
                  font-weight: 500;
                  color: #4a5060;
                  text-align: center;
                }
                > div {
                  flex: 1;
                  width: 48px;
                  height: 48px;
                  font-size: 28px;
                  font-weight: bold;
                  color: #4a5060;
                  text-align: center;
                  line-height: 48px;
                  background: #f0f0f0;
                  border: 1px solid #e5e5e5;
                  &:nth-child(1) {
                    font-size: 18px;
                  }
                }
              }
            }
          }
        }

        &--empty {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          font-size: 24px;
          font-weight: 500;
          color: #999;
        }
      }

      &-footer {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: 636px;
        height: 128px;
        background: #fff;
        box-shadow: 0px 5px 18px 0px rgba(0, 0, 0, 0.04);

        .f_btn {
          width: 278px;
          height: 68px;
          font-size: 30px;
          font-weight: 500;
          border-radius: 4px;

          &--cancel {
            color: #666;
            background: #f8f8f8;
            border: 1px solid #e5e5e5;
          }

          &--confirm {
            color: #fff;
            background: #1981f4;
            opacity: 0.5;
          }

          &--active {
            opacity: 1;
          }
        }
      }
    }

    &_right {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      &-header_list {
        display: flex;
        align-items: center;
        height: 98px;
        padding: 0 250px 0 30px;
        border-bottom: 1px solid #e5e5e5;
        overflow-x: auto;
        box-sizing: border-box;

        &_btn {
          flex-shrink: 0;
          width: 148px;
          height: 60px;
          margin-right: 18px;
          font-size: 26px;
          color: #666;
          background: #f8f8f8;
          border: 1px solid #e5e5e5;
          border-radius: 5px;

          &--active {
            color: #fff;
            background: #1981f4;
          }
        }
      }

      &-header_btn {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 230px;
        height: 98px;
        background: #fff;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);

        > button {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 180px;
          height: 60px;
          font-size: 26px;
          font-weight: 500;
          color: #fff;
          background: #1981f4;
          border-radius: 5px;

          > p {
            font-size: 24px;
            transition-duration: 0.5s;
          }

          .icon--active {
            transform: rotate(-180deg);
            transition-duration: 0.5s;
          }
        }

        .b-popselect {
          position: absolute;
          top: 120px;
          right: 6%;
          z-index: 99;
          width: 216px;
          padding: 20px;
          background: #fff;
          box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
          border-radius: 4px;

          &::before {
            content: "";
            position: absolute;
            left: 179px;
            top: -37px;
            width: 0;
            height: 0;
            border-top: 18px solid transparent;
            border-left: 18px solid transparent;
            border-right: 18px solid transparent;
            border-bottom: 18px solid #e9e9e9;
          }

          &::after {
            content: "";
            position: absolute;
            left: 180px;
            top: -32px;
            width: 0;
            height: 0;
            border-top: 16px solid transparent;
            border-left: 16px solid transparent;
            border-right: 16px solid transparent;
            border-bottom: 16px solid #fff;
          }

          &_option {
            width: 216px;
            height: 60px;
            font-size: 26px;
            font-weight: 500;
            color: #999;
            text-align: center;
            line-height: 60px;

            &--active {
              color: #1981f4;
            }
          }
        }
      }

      &-body {
        flex: 1;
        padding: 0 30px;

        .b-header {
          display: flex;
          align-items: center;
          height: 60px;
          margin: 20px 0;

          &_input {
            > span {
              margin-right: 18px;
              font-size: 26px;
              font-weight: 500;
              color: #2e323d;
              line-height: 18px;
            }

            > input {
              width: 340px;
              height: 60px;
              padding: 0 20px;
              font-size: 26px;
              font-weight: 400;
              color: #666;
              border: 1px solid #c5c5c5;
              border-radius: 5px;
            }
          }

          &_radio {
            display: flex;
            margin-left: 60px;

            > label {
              > input {
                position: absolute;
                width: 0;
                height: 0;
                opacity: 0;
              }

              > input + div {
                width: 148px;
                height: 60px;
                font-size: 26px;
                font-weight: 500;
                color: #666;
                text-align: center;
                line-height: 60px;
                background: #f8f8f8;
                border: 1px solid #e5e5e5;

                &:nth-child(1) {
                  border-right: none;
                  border-radius: 5px 0px 0px 5px;
                }

                &:nth-child(1) {
                  border-left: none;
                  border-right: none;
                }

                &:nth-child(3) {
                  border-left: none;
                  border-radius: 0px 5px 5px 0px;
                }
              }

              > input:checked + div {
                color: #1981f4;
                background: #e6f2ff;
                border: 1px solid #1981f4;
                border-radius: 5px;
              }
            }
          }
        }

        .b-goods-list {
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          align-content: flex-start;
          height: 380px;
          overflow-x: auto;

          &-item {
            display: flex;
            width: 384px;
            height: 158px;
            padding: 8px;
            margin: 0 20px 20px 0;
            background: #f8f8f8;
            border: 1px solid #e5e5e5;
            border-radius: 5px;

            &:nth-child(2n) {
              margin-bottom: 0;
            }

            &_left {
              width: 158px;
              height: 158px;
              margin-right: 20px;
              > img {
                width: 100%;
                height: 100%;
              }
            }
            &_right {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              .r-header {
                > p {
                  width: 187px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  &:nth-child(1) {
                    font-size: 22px;
                    font-weight: bold;
                    color: #2e323d;
                  }
                  &:nth-child(2) {
                    font-size: 20px;
                    font-weight: 500;
                    color: #4a5060;
                  }
                }
              }
              .r-footer {
                display: flex;
                justify-content: space-between;
                align-items: center;

                &_amount {
                  font-size: 18px;
                  font-weight: 400;
                  color: #2e323d;
                  &--bold {
                    font-size: 24px;
                  }
                }
                &_stock {
                  font-size: 18px;
                  font-weight: 500;
                  color: #4a5060;
                }
              }
            }
          }
        }

        .b-footer {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 10px;
          > span {
            margin: 0 20px;
            font-size: 30px;
            color: #4a5060;
          }
          &-num {
            font-size: 20px;
            font-weight: 500;
            color: #2e323d;
          }
        }
      }

      &-footer {
        display: flex;
        height: 437px;
        border-top: 1px solid #e5e5e5;

        &_left {
          width: 88px;
          height: 407px;
          padding-top: 30px;
          background: #fff;
          border-right: 1px solid #e5e5e5;

          > p {
            width: 88px;
            height: 44px;
            margin-bottom: 20px;
            text-align: center;
            line-height: 44px;
            font-size: 26px;
            font-weight: 500;
            color: #2e323d;
            text-align: center;
          }
        }

        &_right {
          flex: 1;
          height: 407px;
          padding-top: 30px;

          .r-list {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            padding: 0 20px;

            &-item {
              width: 98px;
              height: 44px;
              margin: 0 20px 20px 0;
              font-size: 24px;
              font-weight: 500;
              color: #4a5060;
              text-align: center;
              line-height: 44px;
              background: #f8f8f8;
              border: 1px solid #e5e5e5;
              border-radius: 5px;

              &:nth-child(9n) {
                margin: 0;
              }

              &--unactive {
                color: #b5b5b5;
                border: 1px dashed transparent;
                background: linear-gradient(#fff, #fff) padding-box,
                  repeating-linear-gradient(
                    -45deg,
                    #999 0,
                    #999 5px,
                    #fff 0,
                    #fff 10px
                  );
              }
            }
          }

          .r-list--empty {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            > img {
              width: 174px;
              height: 135px;
            }
            > p {
              height: 23px;
              margin-top: 20px;
              font-size: 24px;
              font-weight: 500;
              color: #666;
              line-height: 30px;
            }
          }
        }
      }
    }
  }
}
</style>